//柱状图封装
import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';

//1.把功能代码都放到这个组件中和
//2.把可变的部分抽象成prop参数

const BarChart = ({ title, data }) => {
    const chartRef = useRef(null);
    useEffect(() => {
        //1.获取渲染图表的dom节点
        const chartDom = chartRef.current;
        // const chartDom = document.getElementById('main');

        //2.图标初始化生成图表实例
        const myChart = echarts.init(chartDom);

        //3.配置图表的相关参数
        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
                //此处需要可做修改
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {

                    // data: [10, 40, 70],
                    data: data,
                    type: 'bar'
                }
            ]
        };

        //4.使用图表参数完成图表的渲染
        option && myChart.setOption(option);
    }, [])

    return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}

export default BarChart;